<template>
  <div class="etc_detail">
    <header>
       <p @click='home'><img src="../assets/img/left@2x.png"></p>
       <p>{{title}}</p>
       <p @click='showw'><span>换卡查询</span></p>
    </header>
    <div class="detail_list" v-for="item in listData">
       <div class="timer_cnt">
       	  <p><time>{{item.month}}</time><span>（部分数据会延时）</span></p>
       	  <p><b>消费:</b><span>{{item.total}}</span></p>
       </div>
        <div class="content_list">
        	<ul>
        		<li v-for="detail in item.details">
        			<div class="concreat_time">
        				<span>{{detail.weekday}}</span>
        				<span>{{detail.date}}</span>
        			</div>
        			<div class="ico_list">
        				<img src="../assets/img/icon@2x.png" >
        			</div>
        			<div class="dress_local">
        				<span>{{detail.amount}}</span>
        				<span>地点：{{detail.location}}</span>
        			</div>
        		</li>
        	</ul>
        </div>
    </div>
    <div class="zhezhao" v-show="hidee"></div>
      <div class="queding" v-show="hidee">
        <div class="shuoming">
          <p>必须是已验证的ETC卡才可以<br>查询消费明细，你还没有可查<br>询的ETC卡!</p>
        </div>
        <ul>
          <li class="delete" @click="hideh">取消</li>
          <li class="sure" @click='ETCkahao'><router-link to = '/etc_card'>去添ETC卡</router-link></li>
        </ul>
      </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: 'etc_detail',
  data () {
    return {
      listData: [],
      active: 'etc_detail',
      title: '鲁AN357H',
      hidee:false
    }
  },
  mounted () {
    var self = this;
    var weekdays = ['周日','周一','周二','周三','周四','周五','周六'];
    axios.get('http://127.0.0.1:9999/etc/getEtcRecords').then(function(rep){
      self.listData = rep.data.map(v=>{
        // console.log(v)
        return {
          month: v.month.replace('-','年') + '月',
          total: v.details.reduce((lastVal,curVal)=>{
            return parseFloat(curVal.amount) + lastVal
          },0),
          details: v.details.map(n=>{
            var d = new Date(n.date);
            return {
              date: d.getMonth()+1 + '-' + d.getDate(),
              weekday: weekdays[d.getDay()],
              amount: '-' + n.amount,
              location: n.location
            }
          })
        }
      });
    },function(){
      console.log(arguments)
    })
  },
   methods:{
    home:function(){
        this.$router.go(-1)
    },
    ETCkahao:function(){
        document.body.style.overflow = 'auto';
    },
    showw:function(){
       this.hidee=true
       document.body.style.overflow = 'hidden';
    },
     hideh:function(){
       this.hidee=false
       document.body.style.overflow = 'auto';
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '../assets/less/style.less';
.etc_detail {
  header {
     .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: fixed;
      width: 100%;
      /* .border(1,solid,#000); */
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(38,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        /* text-align: right; */
        display: flex;
        justify-content: flex-end;
        span {
        	.margin-right(30);
        	display: block;
	        .font(26,#4aba80);
	        .padding(12,12,12,12);
	        background: #fff;
	        .border-radius(8);
        }
      }
  }
    .zhezhao{
      position: absolute;
      left: 0;
      top:0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.3);
    }
      .queding{
        .px2rem(width,444);
        /*display: flex;*/
        .px2rem(height,316);
         background: #fff;
        position: absolute;
        left: 20%;
        top: 30%;
        .shuoming{
          display: flex;
          justify-content:center;
          .px2rem(padding-top,28);
          .px2rem(padding-bottom,28);
          .px2rem(line-height,60);
          p{
          font-size: 14px;
          color:#000;
          font-family: "微软雅黑"
          }
        }
        ul{
          display: flex;
          justify-content: space-around;
          .px2rem(padding-bottom,46);
          .delete{
              .px2rem(width,168);
              .px2rem(height,52);
              border:1px solid #dedbdb;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 10px;
            }
          .sure{
              .px2rem(width,168);
              .px2rem(height,52);
              border:1px solid #dedbdb;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 10px;
              background: #4aba80;
              color:#fff;
            }
          }
     }
    .detail_list {
    	width: 92%;
      .px2rem(padding-top,88);
    	margin: auto;
    	.timer_cnt {
    		.px2rem(height,108);
    		display: flex;
    		justify-content: space-between;
    		align-items: center;
    		p:nth-child(1){
				time {
					.font(28,#636363);
				}
				span {
					.font(24,#808080);
				}
    		}
    		p:nth-child(2){
				b {
					.font(28,#636363);
				}
				span {
					.font(30,#fa8e01);
					font-weight: bold;
				}
    		}
    	}
    	.content_list {
    		ul {
    			li {
    				.px2rem(height,120);
    				background: #f3f3f3;
    				display: flex;
    				align-items: center;
    				.border-bottom(1,solid,#c2c2c2);
    				.concreat_time {
    					.font(26,#737373);
						display: flex;
						flex-direction: column;
						.padding-left(30);
						span:nth-child(2){
							.padding-top(18);
						}
    				}
    				.ico_list {
    					.padding-left(10);
						img {
							.px2rem(height,60);
							.px2rem(height,60);
						}
    				}
    				.dress_local {
    					.padding-left(60);
						display: flex;
						flex-direction: column;
  						span:nth-child(1) {
  							.font(24,#4aba80);
  							font-weight: bold;
  						}
  						span:nth-child(2) {
  							.font(24,#9c9c9c);
  							.padding-top(18);
  						}
      			}
    			}
    		}
    	}
    }
  }
</style>
